<template>
  <el-dialog
    class="public-dialog"
    title="更多记录"
    width="40%"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="max-h-80vh" v-loading="loading">
      <div class="text-center my-4" v-if="!list?.length">暂无数据</div>
      <template v-else>
        <div v-for="item in list" :key="item" class="mb-4">
          <VText
            :title="it.title"
            :value="item[it.value]"
            v-for="it in label"
            :key="it"
          ></VText>
        </div>
      </template>
    </div>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { getHistoryReason } from "./api.js";
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  id: { type: [String, Number], default: null },
  type: { type: Number, default: null },
});
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const loading = ref(false);
const list = ref([]);
const label = ref([]);
const { id, type } = toRefs(props);
const content = {
  pause: [
    { title: "暂停人员", value: "create_user" },
    { title: "暂停时间", value: "create_time" },
    { title: "暂停原因", value: "reject_method_name" },
    { title: "暂停备注", value: "reason" },
  ],
  reject: [
    { title: "驳回人员", value: "create_user" },
    { title: "驳回时间", value: "create_time" },
    { title: "驳回原因", value: "reject_method_name" },
    { title: "驳回备注", value: "reason" },
  ],
};
watch(
  () => id.value,
  (val) => {
    label.value = [];
    if (!id.value) return;
    getList(id.value, type.value);
  }
);
const getList = async (pds_id, reason_type) => {
  try {
    loading.value = true;
    const { data } = await getHistoryReason({ pds_id, reason_type });
    label.value = [1, 3].includes(type.value)?content.pause:content.reject;
    list.value = data;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped></style>
